<template>
    <div id="index">
      <el-container style="height: 100%;">
        <el-aside style="height: 100%;max-width: 200px;">
          <leftnav></leftnav>
        </el-aside>
        <el-container>
          <el-header>
            <mheader></mheader>
          </el-header>
          <div style="background-color: #263343;">
            <Breadcrumb></Breadcrumb>
          </div>
          <el-main style="padding: 10px;">
            <router-view :key="route.path"></router-view>
          </el-main>
        </el-container>
      </el-container>
      <!-- <router-view></router-view> -->
    </div>
  </template>
  
  <script setup>
  import { onMounted } from 'vue';
  import $sys from '../api/sys';
  import {mainStore} from '../store/index';
  import leftnav from '../components/leftnav.vue';
  import mheader from '../components/header.vue';
  import Breadcrumb from '../components/Breadcrumb.vue';
  import { useRoute } from 'vue-router';
  const $store=mainStore();
  const route=useRoute();
  onMounted(()=>{
    $sys.devicecount().then(res=>{
      if(res.code==200){
        $store.total=res.data.total;
        $store.online=res.data.online;
        $store.offline=res.data.offline;
      }
    })
  })
  </script>
  
  <style scoped>
  </style>
  
  <style lang='less'>
  #index {
    height: 100%;
    .el-aside{
      max-width: 200px;
      width: auto;
    }
    .el-header{
      padding: 0px;
    }
    .el-main{
      padding: 0px;
      background-color: #263343;
    }
  }
  </style>